<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    /*
    返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
    语法:
        elementList = parentNode.querySelectorAll(selectors);
    参数: selectors
        一个 DOMString 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS selector 如果不是，会抛出一个 SyntaxError 错误
    返回值:
        一个静态 NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList
    */
    const divs = document.querySelectorAll("div")
    console.log(divs)
    divs.forEach((item) => {
        item.style.color = "red"
    })

    const lis = document.querySelectorAll("ul li")
    console.log(lis)
    for (let i = 0; i < lis.length; i++) {
        lis[i].style.color = "red"
    }
</script>
</body>
</html>